<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
 *{margin:0;padding:0;}
        body{
            width:100%;
            height:10000000px;
        }
        #mask{
            display:none;
            background:rgba(0,0,0,0.3);
            width:100%;
            height:100%;
            position:fixed;
			
        }
        #login{
            display:none;
            background:white;
            width:400px;
            height:250px;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-200px;
            margin-top:-125px;
        }
        #login #close_login{
            position:absolute;
            right:350px;
            bottom:10px;
            font-size:20px;
            width:20px;
            height:20px;
            background:skyblue;
            cursor:pointer;
        }

</style>

<script type="text/javascript">
/*
         window.onload=function(){
            var btn=document.getElementById("btn");
            var mask=document.getElementById("mask");
            var login=document.getElementById("login");
            btn.onclick=function(){
                mask.style.display="block";
                login.style.display="block";
            };
            var close_login=document.getElementById("close_login");
            close_login.onclick=function(){
                mask.style.display="none";
                login.style.display="none";
            };
        };
*/
            
			/*
			function clickshow(){
			var btn=document.getElementById("btn");
            var mask=document.getElementById("mask");
            var login=document.getElementById("login");
			mask.style.display="block";
            login.style.display="block";
			
           
            }
			
			function close_login(){
			var btn=document.getElementById("btn");
            var mask=document.getElementById("mask");
            var login=document.getElementById("login");
			var close_login=document.getElementById("close_login");
			
            mask.style.display="none";
            login.style.display="none";
				
            }

 */

</script>
</head>
<body>
<div id="mask"></div>

      <div id="login">
          <span id="close_login" onclick="close_login()">×</span>
      </div>
      <a href="javascript:;" id="btn" onclick="clickshow()">点我</a>

</body>
</html>